<!--内容 -->
<template>
  <div class="all-message_box">
    <div v-for="content in contentList" :key="content.id" class="item">
      <div class="content">
        <chat-avatar
          :size="36"
          :content="content.avatar ? content.avatar : content.senderName"
        ></chat-avatar>
        <div class="info">
          <div class="header">
            <span class="user">{{ content.senderName }}</span>
            <span>{{ timeFormat(content.sendTime) }}</span>
          </div>
          <template v-if="content.type === MESSAGE_TYPE.FILE">
            <div v-if="content.fileType === FILE_TYPE.PIC" class="bottom">
              <el-image
                :src="minioEndpoint_mini + content.content + '!150x150'"
                :preview-src-list="[minioEndpoint_mini + content.content]"
                :lazy="true"
              ></el-image>
            </div>
            <div v-else-if="content.fileType == FILE_TYPE.VIDEO" class="bottom">
              <video
                style="max-width: 200px; min-width: 100px"
                controls
                loop
                :src="minioEndpoint_mini + content.content"
              ></video>
            </div>
            <div v-else class="bottom">
              <div class="file_content">
                <img
                  style="width: 32px; height: 35px"
                  :src="
                    require('@/assets/img/' +
                      getFileType(content.fileName) +
                      '.png')
                  "
                />
                <div class="r_info">
                  <div class="name">
                    <div class="pre">{{ content.fileName.slice(0, -8) }}</div>
                    <div class="next">{{ content.fileName.slice(-8) }}</div>
                  </div>
                  <div class="size">
                    {{ formateFileSize(content.fileSize) }}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="bottom" v-html="content.contentText"></div>
          </template>
          <div class="operate_btn">
            <svg-icon
              v-if="content.type === MESSAGE_TYPE.TEXT"
              @click="handleCopy(content)"
              iconClass="copy-hover"
            ></svg-icon>
            <svg-icon
              v-if="
                content.type == MESSAGE_TYPE.FILE ||
                content.type === MESSAGE_TYPE.TEXT
              "
              @click="handleForward(content)"
              iconClass="file-forward"
            ></svg-icon>
            <svg-icon
              v-if="content.type === MESSAGE_TYPE.FILE"
              @click="handleDownload(content)"
              iconClass="file-download"
            ></svg-icon>
          </div>
          <el-progress
            v-if="
              content.downloadProcessNum > 0 &&
              content.downloadProcessNum < 100 &&
              content.type === MESSAGE_TYPE.FILE
            "
            class="propress"
            :percentage="content.downloadProcessNum"
          ></el-progress>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chatAvatar from "@/components/common/avatar.vue"
import { timeFormat } from "@/utils"
import { FILE_TYPE, getFileType, MESSAGE_TYPE } from "@/utils/constant"
import { copyText, formateSize } from "@/utils/chat"
import { courseDownload } from "@/utils/file"
import * as math from "mathjs"
import { mathNum } from "@/utils/mathTool"

export default {
  name: "contentPage",
  components: { chatAvatar },
  props: {
    contentList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      timeFormat,
      // eslint-disable-next-line no-undef
      minioEndpoint_mini,
      MESSAGE_TYPE,
      FILE_TYPE
    }
  },

  methods: {
    getFileType(name) {
      const { fileType } = getFileType(name)
      return fileType
    },
    formateFileSize(size) {
      return formateSize(size)
    },
    handleForward(content) {
      this.$forwardDialog.open(content)
    },
    handleCopy(content) {
      copyText(
        content.contentText,
        () => {
          this.$message.success("复制成功")
        },
        () => {
          this.$message.error("复制失败")
        }
      )
    },
    handleDownload(content) {
      if (content.downloadProcessNum > 0 && content.downloadProcessNum < 100) {
        this.$message.warning("文件正在下载中，请稍后")
        return
      }
      courseDownload(
        // eslint-disable-next-line no-undef
        minioEndpoint_mini + content.content,
        content.fileName,
        (e) => {
          content.downloadProcessNum = this.cumputeProcess(e.loaded, e.total)
        }
      )
    },
    cumputeProcess(a, b) {
      const num = math.multiply(mathNum.divide(a, b), 100).toFixed()
      return parseInt(num)
    }
  }
}
</script>
<style lang="less" scoped>
.all-message_box {
  // padding: 10px;
  .item {
    padding: 15px 10px;
    position: relative;
    .content {
      display: flex;
      font-size: 12px;
      position: relative;
      .info {
        padding-left: 5px;
        flex: 1;
        .header {
          display: flex;
          justify-content: space-between;
          color: #999999;
        }
        .bottom {
          padding-top: 5px;
          // width: 200px;
          // white-space: nowrap;
          // overflow: hidden;
          // text-overflow: ellipsis;
          img {
            width: 24px;
            height: 24px;
          }
        }
      }

      .file_content {
        display: flex;
        // justify-content: space-between;
        padding: 5px;
        background: #f0f1f2;
        border-radius: 3px;
        width: 213px;
        .r_info {
          padding-left: 5px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name {
            max-width: 160px;
            display: flex;
            overflow: hidden;
            color: #000000;
            flex: 1;
            font-weight: 600;
            .pre {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .next {
              white-space: nowrap;
            }
          }
          .size {
            color: #999999;
          }
        }
      }
      .operate_btn {
        display: none;
        position: absolute;
        right: 4px;
        bottom: 0px;
        font-size: 15px;
        color: #999999;
        svg {
          margin-left: 8px;
          cursor: pointer;
        }
      }
    }
    &:hover {
      background: #e1e6f0;
      .operate_btn {
        display: block;
        svg:hover {
          color: #1b88ff;
        }
      }
    }
    .propress {
      width: 213px;
      position: absolute;
      bottom: -16px;
    }
  }
}
</style>
